<script lang="ts">
import { isFunction } from '@peng_kai/kit/libs/lodash-es';
import type { VNode } from 'vue';
import { computedAsync } from '@peng_kai/kit/libs/vueuse';
import cs from '~/composables/useCS';

function setIcon(iconPromise: Promise<any>) {
  return computedAsync(async () => {
    const iconModule = await iconPromise;
    return iconModule.default;
  });
}
</script>

<script lang="ts" setup>
export interface IList { title: string; content: string | (() => VNode) }
// withDefaults(defineProps<{ list?: IList[] }>(), { list: () => qaqList });
const qaqList = computed(() => [
  {
    icon: setIcon(import('./imgs/faq_1.svg')),
    title: `${$t('y8GeRiLh2PKlLkTj_6u2a')}`,
    content: `${$t('kmI3VJJ4g2evie8UKc3R')}<p class="!mt-2">${$t('dEcFiWapv3SuDj0xJ69dH')}</p>`,
  },
  {
    icon: setIcon(import('./imgs/faq_2.svg')),
    title: `${$t('yap3GErLb2QYk0gADfUc')}`,
    content: $t('pJ1HRpFxT6RexCcEySGmV'),
  },
  {
    icon: setIcon(import('./imgs/faq_3.svg')),
    title: `${$t('6lHMmCMhvgjWk4kKMfLn5')}`,
    content: $t('nvc7hkjdjbqLwj0lzDtxo'),
  },
  {
    icon: setIcon(import('./imgs/faq_4.svg')),
    title: `${$t('ao1zgUk11qrCXa3Op6nMw')}`,
    content: $t('nbEbduug3Ad0FqTkVf4I'),
  },
  {
    icon: setIcon(import('./imgs/faq_5.svg')),
    title: `${$t('biSfl9r6pwiGWj2d8Bw1F')}`,
    content: $t('uo7I5UXd07AvYWwLn3hc'),
  },
  {
    icon: setIcon(import('./imgs/faq_6.svg')),
    title: `${$t('rsKVkA9Pr0bEz0h9jJoVm')}`,
    content: $t('5h9oNw4Nl_2bBpTfFm7Xn'),
  },
  {
    icon: setIcon(import('./imgs/faq_7.svg')),
    title: `${$t('u8ZjdVyMpgfAqylfNlxd')}`,
    content: $t('aUrTAbAynNwpKmuoZi9'),
  },
  {
    icon: setIcon(import('./imgs/faq_8.svg')),
    title: `${$t('nYrfqMc6GrcSHmnlBxIh7')}`,
    content: $t('niAnYlwLgy7zkmhKcZilg'),
  },
  {
    icon: setIcon(import('./imgs/faq_9.svg')),
    title: `${$t('acPiIgxUp4Fyw6SHtobmW')}`,
    content: $t('nQig8rgFAqVuv017SGy'),
  },
  {
    icon: setIcon(import('./imgs/faq_10.svg')),
    title: `${$t('bshRk78k0VtQDdApzDu')}`,
    content: $t('leMcrQhtC6TkFrJjoySv8'),
  },
  {
    icon: setIcon(import('./imgs/faq_11.svg')),
    title: `${$t('sDCd7IelWGgRWmbAi4Qju')}`,
    content: $t('yaixrsJl4OqYs82z3EdW5'),
  },
  {
    icon: setIcon(import('./imgs/faq_12.svg')),
    title: `${$t('nH269odZrMAbZgLb81Vql')}`,
    content() {
      return h('span', null, [
        h('span', null, $t('dlRmx7iw1bXd6wa8V8asq')),
        h('span', { class: 'text-green underline cursor-pointer', onClick: cs.show }, $t('w5LsiXdfRxka8qXliAo1')),
      ]);
    },
  },
]);

const activeRef = defineModel<string | number>('active');

function RenderContent({ content }: { content: IList['content'] }) {
  if (!content)
    return null;
  if (isFunction(content))
    return content();
  const regex = /<[^>]+>/g;
  return regex.test(content) ? h('div', { innerHTML: content }) : content;
}
</script>

<template>
  <TCard :title="$t('xk6SKdHgiHgx60gZBuyx6')">
    <ACollapse v-model="activeRef" accordion :border="false" class="ant-cover__collapse" expandIconPosition="end" :bordered="false">
      <ACollapsePanel
        v-for=" (item, idx) of qaqList"
        :key="idx "
        :name="idx"
        class="ant-cover__collapse-panel"
        :titleClass="$bp.ltTabletl ? 'text-3.5' : 'text-5'"
        :border="false"
      >
        <template #header>
          <div class="flex items-center gap-2">
            <img :src="toValue(item.icon)" class="w-1.2em">
            {{ item.title }}
          </div>
        </template>
        <p class="text-4 text-sys-text-body lt-tabletl:text-3">
          <RenderContent :content="item.content" />
        </p>
      </ACollapsePanel>
    </ACollapse>
  </TCard>
</template>
